/*
 * @Author: DaQing Lu
 * @Date: 2020-02-05 14:56:30
 * @LastEditors  : DaQing Lu
 * @LastEditTime : 2020-02-13 19:11:08
 * @Description: file content
 */
import React, { useState, useEffect } from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
import Item1 from './pages/Item1';
import Irem234 from "./pages/Item234";
import Enroll from './pages/Enroll';
import Explain from './pages/Explain';
import './App.scss';

import page2title from './pages/iamges/img2/title.png';
import page2pic1 from './pages/iamges/img2/pic1.png';
import page2pic1text from './pages/iamges/img2/pic1text.png'
import page2pic2 from './pages/iamges/img2/pic2.png';
import page2pic2text from './pages/iamges/img2/pic2text.png'
import page2pic3 from './pages/iamges/img2/pic3.png';
import page2pic3text from './pages/iamges/img2/pic3text.png'


import page3title from './pages/iamges/img3/title.png';
import page3pic1 from './pages/iamges/img3/pic1.png';
import page3pic1text from './pages/iamges/img3/pic1text.png'
import page3pic2 from './pages/iamges/img3/pic2.png';
import page3pic2text from './pages/iamges/img3/pic2text.png'
import page3pic3 from './pages/iamges/img3/pic3.png';
import page3pic3text from './pages/iamges/img3/pic3text.png'


import page4title from './pages/iamges/img4/title.png';
import page4pic1 from './pages/iamges/img4/pic1.png';
import page4pic1text from './pages/iamges/img4/pic1text.png'
import page4pic2 from './pages/iamges/img4/pic2.png';
import page4pic2text from './pages/iamges/img4/pic2text.png'
import page4pic3 from './pages/iamges/img4/pic3.png';
import page4pic3text from './pages/iamges/img4/pic3text.png'


function App() {
    const [count, setCount] = useState(1);
    useEffect(() => {
        let audio = document.getElementById('audio');
        audio.play();
    }, []);
    const controlMp3 = () => {
        setCount(count + 1);
        let audio = document.getElementById('audio');
        if (count % 2 === 0) {
            audio.play();
        } else {
            audio.pause();
        }
    }
    return (
        <div className="App" >
            <div className={count % 2 === 1 ? "audioPlay" : "audioStop"} onClick={controlMp3}></div>
            <audio id="audio" src={require('./pages/iamges/TB17gN0WhjaK1RjSZKzXXXVwXXa.mp3')}>
                此浏览器不支持audio
            </audio>
            <WingBlank>
                <Carousel className="my-carousel"
                    vertical
                    dots={false}
                    dragging
                    swiping={true}
                    swipeSpeed={12}
                >
                    <div className="v-item">
                        <Item1 />
                    </div>
                    <div className="v-item">
                        <Irem234 dataUrl={[
                            page2title,
                            page2pic1,
                            page2pic1text,
                            page2pic2,
                            page2pic2text,
                            page2pic3,
                            page2pic3text
                        ]}
                            color={'rgb(90, 101, 233)'}
                        />
                    </div>
                    <div className="v-item">
                        <Irem234 dataUrl={[
                            page3title,
                            page3pic1,
                            page3pic1text,
                            page3pic2,
                            page3pic2text,
                            page3pic3,
                            page3pic3text
                        ]}
                            color={'rgb(202, 94, 166)'}
                        />
                    </div>
                    <div className="v-item">
                        <Irem234 dataUrl={[
                            page4title,
                            page4pic1,
                            page4pic1text,
                            page4pic2,
                            page4pic2text,
                            page4pic3,
                            page4pic3text
                        ]}
                            color={'rgb(139, 209, 211)'}
                        />
                    </div>
                    <div className="v-item">
                        <Enroll />
                    </div>
                    <div className="v-item">
                        <Explain />
                    </div>
                </Carousel>
            </WingBlank>
        </div>
    );
}

export default App;